<template>
	<view class="pageView">
		<u-loading-page :loading="peiLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-navbar
			@click="handleLeftClick"
			leftIconColor="#fff"
			bgColor="#0165FB"
		>
		</u-navbar>
		<view class="titleBlock">
			<view class="titleBlock-title">陪护</view>
			<view class="titleBlock-titleItem">
				<view class="titleBlock-titleItem-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checkWhite.png" mode=""></image>
					<view>省时高效</view>
				</view>
				<view class="titleBlock-titleItem-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checkWhite.png" mode=""></image>
					<view>放心安全</view>
				</view>
				<view class="titleBlock-titleItem-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checkWhite.png" mode=""></image>
					<view>官方直营</view>
				</view>
				<view class="titleBlock-titleItem-item">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/checkWhite.png" mode=""></image>
					<view>全程无忧</view>
				</view>
			</view>
		</view>
		<view class="listBlock">
			<view>
				<u-tabs
				  :list="listTab"
					@click="handleClickTab"
					:current="current"
				></u-tabs>
			</view>
			<scroll-view style="height: 56vh;" scroll-y="true" @scrolltolower="handleScrolltolower">
				<view class="listItem" v-for="(item, index) in serverList" :key="index" @click="handleDetail(item)">
					<image :src="item.img_url" class="listItem-image"></image>
					<view class="listItem-itemFont">
						<view class="listItem-itemFont-left">
							<view class="listItem-itemFont-left-title">{{ item.name }}</view>
							<view class="listItem-itemFont-left-fontBlock">{{ item.intro }}</view>
							<view class="listItem-itemFont-left-priceBlock">
								<text class="listItem-itemFont-left-priceBlock-type">¥</text>
								<text class="listItem-itemFont-left-priceBlock-num">{{ item.price }}</text>
								<text class="listItem-itemFont-left-priceBlock-unit">元/次</text>
							</view>
						</view>
						<view class="listItem-itemFont-right">
							<button @click.stop="handleCreateOrder(item)">预约</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getPzServiceList } from '@/api/common.js'
	export default{
		data() {
			return {
				current: 0,
				peiLoading: false,
				page: 1,
				serverList: [],
				listTab: [
					{
						name: '服务列表'
					}
				]
			}
		},
		onShow() {
			this.serverList = []
			this.page = 1
			this.getList()
		},
		methods: {
			handleClickTab(e) {
				this.current = e.index
			},
			handleLeftClick() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getList() {
				this.peiLoading = true
				getPzServiceList({
					type: uni.getStorageSync('indexType').sx,
					page: this.page
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						this.lastPage = data.last_page
						if (this.serverList.length == 0) {
							this.serverList = data.data
						} else {
							this.serverList = this.serverList.concat(data.data)
						}
					}
					this.peiLoading = false
				})
				.catch(e => {
					this.peiLoading = false
				})
			},
			handleDetail(item) {
				uni.setStorageSync('productDetail', {
					...item,
					url: '/pages/agencyService/agencyService'
				})
				uni.navigateTo({
					url: '/pages/productDetail/productDetail'
				})
			},
			handleCreateOrder(item) {
				uni.setStorageSync('productDetail', {
					...item,
					url: '/pages/agencyService/agencyService'
				})
				uni.navigateTo({
					url: '/pages/createOrder/createOrder'
				})
			},
			handleScrolltolower() {
				if (this.page < this.lastPage) {
					this.page++
					this.getList()
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		width: 100%;
		height: 100vh;
		background: #0165FB;
		.titleBlock{
			margin-top: 180rpx;
			&-title{
				padding-left: 44rpx;
				padding-top: 24rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 48rpx;
				color: #FFFFFF;
			}
			&-titleItem{
				padding-left: 44rpx;
				padding-top: 18rpx;
				padding-right: 114rpx;
				display: flex;
				justify-content: space-between;
				&-item{
					display: flex;
					justify-content: space-around;
					align-items: center;
					image{
						width: 27rpx;
						height: 27rpx;
					}
					view{
						padding-left: 2rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.listBlock{
			margin-top: 58rpx;
			width: 100%;
			height: 77vh;
			background: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			.listItem{
				margin-top: 40rpx;
				padding-left: 32rpx;
				padding-right: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-image{
					width: 188rpx;
					height: 142rpx;
					background: #000;
					border-radius: 16rpx;
				}
				&-itemFont{
					display: flex;
					align-items: center;
					padding-left: 24rpx;
					&-left{
						&-title{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 36rpx;
							color: #222222;
						}
						&-fontBlock{
							padding-top: 6rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #999999;
							width: 346rpx;
							white-space: nowrap; /* 不换行 */
							overflow: hidden; /* 隐藏超出的内容 */
							text-overflow: ellipsis;
						}
						&-priceBlock{
							padding-top: 2rpx;
							&-type{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #E5432E;
							}
							&-num{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 40rpx;
								color: #E5432E;
							}
							&-dian{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #E5432E;
							}
							&-unit{
								padding-left: 8rpx;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #222222;
							}
						}
					}
					&-right{
						padding-left: 16rpx;
						button{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 112rpx;
							height: 50rpx;
							background: #0165FB;
							border-radius: 60rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>